<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/bootstrap-icons/bootstrap-icons.css">
    <script src="./js/jquery-3.7.1.min.js"></script>
    <script src="./js/bootstrap.bundle.js"></script>
    <style>
        body {
            background-color: rgba(29, 53, 87, 0.8);
        }

        .my-btn {
            border: none;
            background-color: white;
        }

        .my-sosuo {
            border-radius: 10px;
        }

        .my-btn1 {
            background-color: blue;
            border-radius: 10px;
        }

        .my-btn2 {
            background-color: blue;
            border-radius: 5px;
        }

        .my-hot {
            background-color: rgb(255, 132, 0);
        }

        .navbar-brand {
            font-weight: 700;
            font-size: 1.8rem;

        }

        .navbar-brand i {
            color: #1D3557;
            margin-right: 10px;
        }

        .navbar-dark .navbar-nav .nav-link {
            color: rgba(255, 255, 255, 0.9);
            font-weight: 500;
            padding: 10px 20px;
            transition: all 0.3s ease;
        }

        .navbar-dark .navbar-nav .nav-link:hover {
            color: #E63946;
        }

        .navbar-toggler {
            border: none;
            color: white;
            font-size: 1.5rem;
        }

        footer {
            background-color: #1D3557;
            color: #aaa;
            padding: 60px 0 20px;
            margin-top: 600px;
        }

        footer h5 {
            color: white;
            margin-bottom: 20px;
            font-weight: 600;
        }

        footer a {
            color: #aaa;
            transition: color 0.3s ease;
            display: block;
            margin-bottom: 10px;
        }

        footer a:hover {
            color: white;
            text-decoration: none;
        }

        .footer-divider {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            margin: 30px 0;
        }
    </style>
    <style>
        body {
            background-color: rgba(29, 53, 87, 0.8);
        }

        .my-btn {
            border: none;
            background-color: white;
        }

        .my-sosuo {
            border-radius: 10px;
        }

        .my-btn1 {
            background-color: blue;
            border-radius: 10px;
        }

        .my-btn2 {
            background-color: blue;
            border-radius: 5px;
        }

        .my-hot {
            background-color: rgb(255, 132, 0);
        }

        .navbar-brand {
            font-weight: 700;
            font-size: 1.8rem;
        }

        .navbar-brand i {
            color: #1D3557;
            margin-right: 10px;
        }

        .navbar-dark .navbar-nav .nav-link {
            color: rgba(255, 255, 255, 0.9);
            font-weight: 500;
            padding: 10px 20px;
            transition: all 0.3s ease;
        }

        .navbar-dark .navbar-nav .nav-link:hover {
            color: #E63946;
        }

        .navbar-toggler {
            border: none;
            color: white;
            font-size: 1.5rem;
        }

        footer {
            background-color: #1D3557;
            color: #aaa;
            padding: 60px 0 20px;
            margin-top: 600px;
        }

        footer h5 {
            color: white;
            margin-bottom: 20px;
            font-weight: 600;
        }

        footer a {
            color: #aaa;
            transition: color 0.3s ease;
            display: block;
            margin-bottom: 10px;
        }

        footer a:hover {
            color: white;
            text-decoration: none;
        }

        .footer-divider {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            margin: 30px 0;
        }

        .change-btn {
            background-color: rgba(29, 53, 87, 0.8);
            color: white;
        }
    </style>
</head>

<body>

    <!-- 导航栏 -->
    <div>
        <nav id="navbar" class="navbar navbar-expand-lg navbar-dark bg-naruto fixed-top py-3"
            style="background-color: rgba(29, 53, 87, 0.8);">
            <div class="container">
                <a class="navbar-brand" href="#">
                    <i class="fas fa-fire"></i>火影忍者手游
                </a>

                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav">
                    <i class="fas fa-bars"></i>
                </button>

                <div class="collapse navbar-collapse" id="mainNav">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="index.html">首页</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="搜索.html">搜索</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="视频播放.html">视频介绍</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="个人界面.html">个人界面</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
    <div class="w-50 mx-auto" style=" margin-top: 90px; ">
        <div class="row">
            <img src="img/logo.png" alt="" height="180" class="d-block mx-auto">
            <div class="my-sousuo input-group mb-3">
                <input type="text" class="my-sosuo form-control" id="search-box" placeholder="火影标题">
                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor"
                    class="bi bi-camera position-absolute " viewBox="0 0 16 16"
                    style="z-index: 999; top: 8px; right: 100px;">
                    <path
                        d="M15 12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1.172a3 3 0 0 0 2.12-.879l.83-.828A1 1 0 0 1 6.827 3h2.344a1 1 0 0 1 .707.293l.828.828A3 3 0 0 0 12.828 5H14a1 1 0 0 1 1 1v6zM2 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.172a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 9.172 2H6.828a2 2 0 0 0-1.414.586l-.828.828A2 2 0 0 1 3.172 4H2z" />
                    <path
                        d="M8 11a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5zm0 1a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM3 6.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z" />
                </svg>
                <!-- 搜索框 -->
                <div class="input-group-append">
                    <button class="my-btn1 btn btn-primary text-white" type="button">火影一下</button>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-6 text-left">
                <b>火影热搜</b>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                    class="bi bi-chevron-right" viewBox="0 0 16 16" style="color: rgb(151, 146, 146);">
                    <path fill-rule="evenodd"
                        d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
                </svg>
            </div>
            <div class="col-6 text-right my-1">

                <button class="my-btn"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                        fill="currentColor" class="bi bi-arrow-repeat d-inline-block " viewBox="0 0 16 16"
                        style="transform: rotate(-60deg); color: rgb(151, 146, 146);">
                        <path
                            d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z" />
                        <path fill-rule="evenodd"
                            d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z" />
                    </svg>
                    <span style="color: rgb(151, 146, 146);">换一换</span>
                </button>


            </div>
            <!-- 搜索 -->
            <div class="col-6 mr-1">
                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor"
                    class="bi bi-unindent d-inline-block text-danger" viewBox="0 0 16 16"
                    style="transform: rotate(90deg);">
                    <path fill-rule="evenodd"
                        d="M13 8a.5.5 0 0 0-.5-.5H5.707l2.147-2.146a.5.5 0 1 0-.708-.708l-3 3a.5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .708-.708L5.707 8.5H12.5A.5.5 0 0 0 13 8Z" />
                    <path fill-rule="evenodd" d="M3.5 4a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 1 0v-7a.5.5 0 0 0-.5-.5Z" />
                </svg>
                <a href="" class="text-danger">百战鼬爆料</a>
            </div>
            <div class="col-5">
                <b style="font-size: 18px;color: gray;">5</b>
                <a href="" class="text-dark">十周年惊天大瓜</a>
                <span class="my-hot text-white rounded-lg small px-1">热</span>
            </div>
            <div class="col-6 ml-1">
                <b style="font-size: 18px;color: red;">1</b>
                <a href="" class="text-dark">服务器又又又出问题了</a>
            </div>
            <div class="col-5">
                <b style="font-size: 18px;color: gray;">6</b>
                <a href="" class="text-dark">新忍法帖-暴走六尾-漩涡鸣人</a>
            </div>
            <div class="col-6 ml-1">
                <b style="font-size: 18px;color: rgba(248, 87, 1, 0.904);">2</b>
                <a href="" class="text-dark">无差别新赛季</a>
                <span class="my-hot text-white rounded-lg small px-1">热</span>
            </div>
            <div class="col-5">
                <b style="font-size: 18px;color: gray;">7</b>
                <a href="" class="text-dark">新版本火影忍者大调整</a>
                <span class="my-hot text-white rounded-lg small px-1">热</span>
            </div>
            <div class="col-6 ml-1">
                <b style="font-size: 18px;color: rgb(255, 184, 5);">3</b>
                <a href="" class="text-dark">没有永久的天王</a>
            </div>
            <div class="col-5">
                <b style="font-size: 18px;color: gray;">8</b>
                <a href="" class="text-dark">破面带土虚化19秒CD</a>
                <span class="my-hot text-white rounded-lg small px-1">热</span>
            </div>
            <div class="col-6 ml-1">
                <b style="font-size: 18px;color: gray;">4</b>
                <a href="" class="text-dark">新忍法帖改革</a>
                <span class="my-hot text-white rounded-lg small px-1">热</span>
            </div>
            <div class="col-5">
                <b style="font-size: 18px;color: gray;">9</b>
                <a href="" class="text-dark">蛤蟆广彩排幕后真相</a>
            </div>
        </div>
    </div>
    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-md-3 mb-4 mb-md-0">
                    <h5>关于游戏</h5>
                    <a href="#">游戏介绍</a>
                    <a href="#">忍者图鉴</a>
                    <a href="#">玩法攻略</a>
                    <a href="#">游戏资讯</a>
                </div>

                <div class="col-md-3 mb-4 mb-md-0">
                    <h5>支持与服务</h5>
                    <a href="#">常见问题</a>
                    <a href="#">联系客服</a>
                    <a href="#">意见反馈</a>
                    <a href="#">防沉迷系统</a>
                </div>

                <div class="col-md-3 mb-4 mb-md-0">
                    <h5>玩家社区</h5>
                    <a href="#">官方论坛</a>
                    <a href="#">玩家交流群</a>
                    <a href="#">赛事直播</a>
                    <a href="#">同人创作</a>
                </div>

                <div class="col-md-3">
                    <h5>官方合作</h5>
                    <a href="#">商务合作</a>
                    <a href="#">内容合作</a>
                    <a href="#">赛事合作</a>
                    <a href="#">青训招募</a>
                </div>
            </div>

            <div class="footer-divider"></div>

            <div class="row">
                <div class="col-md-6 mb-3 mb-md-0">
                    <p class="mb-0">© 2025 火影忍者手游版权所有</p>
                </div>

                <div class="col-md-6 text-md-right">
                    <a href="#" class="d-inline-block mr-3">隐私政策</a>
                    <a href="#" class="d-inline-block mr-3">用户协议</a>
                    <a href="#" class="d-inline-block mr-3">儿童隐私保护指引</a>
                    <a href="#">网络游戏服务</a>
                </div>
            </div>

            <div class="mt-4 text-center">
                <p class="small">本游戏适合12岁以上玩家使用；为了你的健康，请合理控制游戏时间。</p>
                <p class="small">本游戏改编自《火影忍者》漫画，相关著作权及商标权均由集英社、VIZ Media、Shueisha Inc.所有。</p>
            </div>
        </div>
    </footer>

</body>

</html>